
<template>
  <div class="send">
    <el-dialog
      :title="delwithman"
      :visible.sync="visible"
      @close="close"
      :showtransferDialog="showtransferDialog"
      class="sendhead"
    >
      <div>
        <div class="top">
          <div>
            <span class="star">*</span>备注/意见
            <textarea
              name=""
              id=""
              cols="100"
              rows="7"
              v-model="opinion"
            ></textarea>
          </div>
        </div>
        <div class="center">
          <div>
            <span>{{delwithman}}人</span>
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="true"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-button type="danger" icon="el-icon-user-solid" @click="choose"
              >处理人</el-button
            >
          </div>
        </div>
        <div class="bottom" style="text-align: right">
          <el-button size="small" @click="close">取 消</el-button>&nbsp;&nbsp;
          <el-button size="small" type="primary" @click="submit"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 显示选择人员的弹框 -->
    <chooseperson-dialog
      :showchooseDialog.sync="showchooseDialog"
      @getperson="getperson"
    ></chooseperson-dialog>
  </div>
</template>

<script>
import choosepersonDialog from "./choosepersonDialog.vue";
import {committransfer} from  '@/api/ywsp/db.js'
export default {
  components: { choosepersonDialog },
  props: {
    showtransferDialog: {
      type: Boolean,
      default: false,
    },
    delwithman:{
      type:String
    }
  },
  data() {
    return {
      taskid: "",
      visible: this.showtransferDialog,
      opinion: "",
      showchooseDialog: false, //选择人员的弹框
      dynamicTags: [],
      chooseperson:{},
      choosepersoninfo:'' //转办人的这一条信息
    };
  },
  created() {
    this.taskid =this.$route.query.id
  },
  watch: {
    showtransferDialog() {
      this.visible = this.showtransferDialog;
    },
  },
  methods: {
    close() {
      this.$emit("update:showtransferDialog", false);
      this.dynamicTags=[]
    },
    //关闭tag的方法
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    choose() {
      this.showchooseDialog = true;
    },
    getperson(data) {
        // console.log(data)
        this.choosepersoninfo=data
        this.chooseperson=data.fullname
        this.dynamicTags.push(this.chooseperson)
        // console.log( )
        // this.dynamicTags.push(Object.values(this.chooseperson)[0])
    },
   async submit() {
     const res =await committransfer(JSON.stringify({opinion:this.opinion,taskId:this.taskid,usersInfo:this.choosepersoninfo}))
        console.log(res)
        this.close()
        this.dynamicTags=[]
    }
  },
};
</script>

<style lang="scss" scoped>
.send {
  /deep/ .sendhead .el-dialog .el-dialog__header {
    height: 42px;
    background: #f4f6f8 !important;
  }
  /deep/.el-dialog__title {
    font-size: 14px;
    color: black;
    font-weight: bold;
  }
  .center {
    margin: 50px 0 0 80px;
    span {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
.top {
  margin-left: 50px;
  font-weight: bold;
  textarea {
    vertical-align: top;
    border-radius: 4px;
    border: 0.5px solid #dfe2eb;
    resize: none;
    outline: none;
    text-indent: 1em;
    margin-left: 10px;
    ::placeholder {
      color: #dfe2eb !important;
    }
  }
  textarea:focus {
    outline: none;
    border: 0.5px solid red;
  }
}
.bottom {
  margin-top: 30px;
}
.star {
  color: red;
}
.el-tag {
  height: 40px;
  line-height: 40px;
}
</style>